var React = require('react');
var ModalDialog = require('../../common/component/dialog/modal-dialog.node');
var ModalBody = require('../../common/component/dialog/modal-body.node');
var ModalFooter = require('../../common/component/dialog/modal-footer.node');

module.exports = function AssignResourceDialog(props) {

  return (
    <>
      <ModalDialog dialogTitle="${t('ui.security.permission.dialog.assignResource')}">
        <ModalBody>
          <form>
            <nav>
              <div className="nav nav-tabs" role="tablist">
                <button data-x-ui="assignedResourceNavTab" className="nav-link active" type="button" role="tab"
                  data-toggle="tab">
                  {"${t('ui.security.assignResourceDialog.tab.assignedResource')}"}
                </button>
                <button data-x-ui="assignableResourceNavTab" className="nav-link" type="button" role="tab"
                  data-toggle="tab" disabled>
                  {"${t('ui.security.assignResourceDialog.tab.assignableResource')}"}
                </button>
              </div>
            </nav>

            <div className="tab-content" >
              {/* 已分配资源 */}
              <div data-x-ui="assignedResourceTabPane" className="tab-pane fade show active" role="tabpanel">
                <table data-x-ui="assignedResourceTable" className="x-table-custom"
                  data-x-name="assignedResources" data-x-type="dataGrid">
                  <thead>
                    <tr>
                      <th data-field="id" data-visible="false">ID</th>
                      <th data-field="resourceTypeDesc">{"${t('ui.security.resource.field.resourceType')}"}</th>
                      <th data-field="resourcePath">{"${t('ui.security.resource.field.resourcePath')}"}</th>
                      <th data-field="accessMethod">{"${t('ui.security.resource.field.accessMethod')}"}</th>
                      <th data-field="accessPolicyDesc">{"${t('ui.security.resource.field.accessPolicy')}"}</th>
                      <th data-field="frozenFlagDesc">{"${t('ui.security.resource.field.frozenFlag')}"}</th>
                      <th data-field="remark">{"${t('ui.security.resource.field.remark')}"}</th>
                      <th>{"${t('ui.system.common.field.operate')}"}</th>
                    </tr>
                  </thead>
                </table>
              </div>
              {/* END 已分配资源 */}

              {/* 可分配资源 */}
              <div data-x-ui="assignableResourceTabPane" className="tab-pane fade" role="tabpanel">

                <div className="x-search-bar">
                  <form>
                    <div className="form-row align-items-center">

                      <div className="col-auto">
                        <label className="sr-only" htmlFor="resourcePath"></label>
                        <div className="input-group mb-2">
                          <div className="input-group-prepend">
                            <div className="input-group-text">{"${t('ui.security.resource.field.resourcePath')}"}</div>
                          </div>
                          <input type="text" className="form-control" id="resourcePath" data-x-name="searchResourceField.resourcePath" data-x-type="autoTrimText" />
                        </div>
                      </div>

                      <div className="col-auto">
                        <label className="sr-only" htmlFor="remark"></label>
                        <div className="input-group mb-2">
                          <div className="input-group-prepend">
                            <div className="input-group-text">{"${t('ui.security.resource.field.remark')}"}</div>
                          </div>
                          <input type="text" className="form-control" id="remark" data-x-name="searchResourceField.remark" data-x-type="autoTrimText" />
                        </div>
                      </div>

                      {/* 查询按钮 */}
                      <div className="col-auto">
                        <button type="button" className="btn btn-primary mb-2" data-x-ui="searchResourceBtn">
                          {"${t('ui.system.common.btn.search')}"}
                        </button>
                      </div>
                    </div>
                  </form>
                </div>

                <table data-x-ui="assignableResourceTable" className="x-table-custom">
                  <thead>
                    <tr>
                      <th data-checkbox="true"></th>
                      <th data-field="id" data-visible="false">ID</th>
                      <th data-field="resourceTypeDesc">{"${t('ui.security.resource.field.resourceType')}"}</th>
                      <th data-field="resourcePath">{"${t('ui.security.resource.field.resourcePath')}"}</th>
                      <th data-field="accessMethod">{"${t('ui.security.resource.field.accessMethod')}"}</th>
                      <th data-field="accessPolicyDesc">{"${t('ui.security.resource.field.accessPolicy')}"}</th>
                      <th data-field="frozenFlagDesc">{"${t('ui.security.resource.field.frozenFlag')}"}</th>
                      <th data-field="remark">{"${t('ui.security.resource.field.remark')}"}</th>
                      <th>{"${t('ui.system.common.field.operate')}"}</th>
                    </tr>
                  </thead>
                </table>
              </div>
              {/* END 可分配资源 */}
            </div>
          </form>
        </ModalBody>

        <ModalFooter confirmLabel="${t('ui.system.common.btn.save')}" cancelLabel="${t('ui.system.common.btn.cancel')}" />
      </ModalDialog>
    </>
  )
};

